<template>
  <view>
    <myitem v-if="list.length" :list="list" />
    <u-empty class="empty" v-else text="暂无数据" mode="list"></u-empty>
    <u-loadmore
      v-if="list.length != 0"
      :status="status"
      @loadmore="loadmore"
    ></u-loadmore>
	<!-- 浙江高薪企业招聘 -->
	<!-- <view class="card">
		<view class="part1">
			<img src="https://img0.baidu.com/it/u=2098802809,1933450492&fm=253&fmt=auto&app=138&f=JPEG?w=608&h=500" alt="">
		</view>
		<view class="part2">
			<ul>
				<li class="ulLi1">浙江高薪企业招聘</li>
				<li class="ulLi2">5500-8000/月</li>
				<li class="ulLi3">16-60岁</li>
				<li class="ulLi4">包吃住、美女帅哥多、接收少数民族、纹身烟疤接收、不体检、长白班、夫妻房</li>
			</ul>
			<button class="ljbm">立即报名</button>
		</view>
	</view> -->
	<!-- 江苏高薪企业招聘 -->
	<!-- <view class="card">
		<view class="part1">
			<img src="https://img0.baidu.com/it/u=3323905116,1864580771&fm=253&fmt=auto&app=138&f=JPEG?w=739&h=500" alt="">
		</view>
		<view class="part2">
			<ul>
				<li class="ulLi1">江苏高薪企业招聘</li>
				<li class="ulLi2">5500-8000/月</li>
				<li class="ulLi3">16岁-55岁</li>
				<li class="ulLi4">包吃住、美女帅哥多、接收少数民族、纹身烟疤接收、不体检、长白班、夫妻房</li>
			</ul>
			<button class="ljbm">立即报名</button>
		</view>
	</view> -->
	<!-- 上海高薪企业招聘 -->
	<!-- <view class="card">
		<view class="part1">
			<img src="https://img1.baidu.com/it/u=1005755442,781254965&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
		</view>
		<view class="part2">
			<ul>
				<li class="ulLi1">上海高薪企业招聘</li>
				<li class="ulLi2">5500-8000/月</li>
				<li class="ulLi3">16岁-55岁</li>
				<li class="ulLi4">包吃住、美女帅哥多、接收少数民族、纹身烟疤接收、不体检、长白班、夫妻房</li>
			</ul>
			<button class="ljbm">立即报名</button>
		</view>
	</view> -->
	
	<!-- <view class="card">
		<view class="part1">
			<img src="https://img1.baidu.com/it/u=2148664296,3848867136&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500" alt="">
		</view>
		<view class="part2">
			<ul>
				<li class="ulLi1">安徽高薪企业招聘</li>
				<li class="ulLi2">5500-8000/月</li>
				<li class="ulLi3">16岁-55岁</li>
				<li class="ulLi4">包吃住、美女帅哥多、接收少数民族、纹身烟疤接收、不体检、长白班、夫妻房</li>
			</ul>
			<button class="ljbm">立即报名</button>
		</view>
	</view> -->
	
	<!-- <view class="card">
		<view class="part1">
			<img src="https://img2.baidu.com/it/u=1103990412,1686722045&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500" alt="">
		</view>
		<view class="part2">
			<ul>
				<li class="ulLi1">湖北高薪企业招聘</li>
				<li class="ulLi2">5500-8000/月</li>
				<li class="ulLi3">16岁-55岁</li>
				<li class="ulLi4">包吃住、美女帅哥多、接收少数民族、纹身烟疤接收、不体检、长白班、夫妻房</li>
			</ul>			
			<button class="ljbm">立即报名</button>
		</view>
	</view> -->
	
	<!-- <view class="card">
		<view class="part1">
			<img src="https://img1.baidu.com/it/u=1870590160,1602917797&fm=253&fmt=auto&app=138&f=JPEG?w=450&h=300" alt="">
		</view>
		<view class="part2">
			<ul>
				<li class="ulLi1">四川高薪企业招聘</li>
				<li class="ulLi2">5500-8000/月</li>
				<li class="ulLi3">16岁-55岁</li>
				<li class="ulLi4">包吃住、美女帅哥多、接收少数民族、纹身烟疤接收、不体检、长白班、夫妻房</li>
			</ul>			
			<button class="ljbm">立即报名</button>
		</view>
	</view> -->
  </view>
</template>

<script>
import myitem from "./list.vue";
import api from "../../../../api/routes.js";
export default {
  components: {
    myitem,
  },
  data() {
    return {
      page: 1,
      limit: 8,
      status: "loadmore",
      list: [],

      // 拿到的数据总条数
      total: 0,
      //判断是否发送请求的条件
      load: false,
    };
  },
  onLoad() {
    this.getList();
  },
  onReachBottom() {
    if (this.status === "loadmore") {
      this.loadmore();
    }
  },
  methods: {
    async getList() {
      // 判断当前是否在请求，如果为true正在请求数据，就让他返回空，如果为false没在请求，就让它开始请求数据
      if (this.load) {
        return;
      }
      this.load = true;
      // 请求数据时，状态改为加载中状态
      this.status = "loading";
      const res = await this.$myRequest({
        url: api.pageMyDispute,
        method: "POST",
        data: {
          page: this.page,
          limit: this.limit,
        },
      });
      this.load = false;
      if (res.data.code !== 0) {
        return uni.showToast({
          title: res.msg,
          icon: "none",
        });
        this.status = "nomore";
      }
      this.total = res.data.page.totalCount;
      this.list = [...this.list, ...res.data.page.list];

      this.ismore();
    },

    ismore() {
      if (this.total === this.list.length) {
        this.status = "nomore";
      } else {
        this.status = "loadmore";
      }
    },
    loadmore() {
      this.page++;
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.empty{
  display: block;
  margin: 100px auto;
}
.card{
	// height: 150px;
	margin: 10px;
	border: 1px solid #409EFF;
	display: flex;
	
	.part1{
		width: 42%;
		// border: 1px solid green;
		padding: 10px 0px 10px 8px;
		image{
			width: 100%;
			height: 100%;
		    border-radius: 12px;	
		}
	}
	.part2{
		flex: 1;
		// border: 1px solid chartreuse;
		padding: 8px;
		padding: 10px;
		// position: relative;
		.ljbm{
			width: 100px;
			height: 28px;
			line-height: 26px;
			border-radius: 14px;
			font-size: 14px;
			border: 1px solid #05206F;
			background: #05206F;
			color: #fff;
			margin-right:10px ;
			// position: absolute;
			bottom: -5px;
			right: -10px;
		}
		ul{
			li{
				line-height: 22px;
			}
			
			.ulLi1{
				font-weight: bold;
				font-size: 18px
			}
			.ulLi2{
				font-size: 16px;
				color: red;
				line-height: 22px;
				
			}
			.ulLi3{
				font-size: 14px;
			}
			.ulLi4{
				font-weight: bold;
				color: #00A0EA;
				font-size: 10px;
				line-height: 16px;
				// width:50px;
				background: #DBF8FE;
				// text-align: center;
				
			}
			.ulLi5{
				font-size: 10px;
				line-height: 16px;
			}
		}
	}
}
</style>
